<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- TDK三大标签 是每个网站必备的 T title D description K keywords -->
    <!-- seo优化 关键字搜索优化 -->
    <meta name="keywords" content="兔鲜生,食品,生鲜,服装,家电,电商,购物">
    <!-- 搜索出来的网站介绍 -->
    <meta name="description" content="兔鲜生官网，致力于打造便捷的社区化电商购物网站">
    <title>兔鲜生 -新鲜 惠民 便捷</title>
    
    <!-- 引入css初始化文件 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入网页图标 -->
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入js代码 -->
    <script src="./js/js-test.js"></script>
</head>
<body>
    <!-- 网页头部制作 -->
    <header>
        <!-- 头部导航 -->
        <div class="top-nav">
            <div class="container">
                <ul>
                    <li><a href="">登录入口</a></li>
                    <li><a href="">免费注册</a></li>
                    <li><a href="">我的订单</a></li>
                    <li><a href="">会员中心</a></li>
                    <li><a href="">帮助中心</a></li>
                    <li><a href="">在线客服</a></li>
                    <li><a href=""><i></i> 手机版</a></li>
                </ul>
            </div>
        </div>
        <div class="nav">
            <div class="container">
                <div class="logobox"> 
                    <!-- seo优化 logo套一个h1标签，提高重要性，a需要和父亲一样大，方便用户点击 -->
                    <h1><a href="" title="兔鲜生官网">兔鲜生</a></h1>
                </div>
                <div class="middle-nav">
                    <ul>
                        <li><a href="">首页</a></li>
                        <li><a href="">生鲜</a></li>
                        <li><a href="">美食</a></li>
                        <li><a href="">餐厨</a></li>
                        <li><a href="">电器</a></li>
                        <li><a href="">居家</a></li>
                        <li><a href="">洗护</a></li>
                        <li><a href="">孕婴</a></li>
                        <li><a href="">服装</a></li>
                    </ul>
                </div>
                <!-- 搜索与购物车 -->
                <div class="search-buy"><input type=text placeholder="搜一搜" value="" />
                </div>
                <div class="shopping-car">
                    <a href=""><div class="goodsnum">3</div></a>
                </div>
            </div>
        </div>
    </header>
    <!-- 轮播图 -->
    <section class="entry">
        <div class="container">
            <!-- 图片 -->
            <div class="banner">
                    <img src="./uploads/banner_1.png" alt=""/>
                    <img src="./uploads/banner_2.png" alt=""/>
            </div>
               
           
             <!-- 小圆点儿 
            <ul class="circle">
                <li class="active"></li>
                <li class="active"></li>
                <li class="active"></li>
                <li class="active"></li>
                <li ></li>
            </ul>-->
             <!-- 按钮 -->
            <a class="prev" href=""></a>
            <a class="next" href=""></a>
            <!-- 侧边栏 -->
            <aside class="category">
                <a href="">     
                    <dl>
                    <dd>
                        <dt>生鲜</dt>
                        <dt>水果 蔬菜</dt>
                    </dd>
                </dl></a>
           
                <a href="">
                    <dl>
                        <dd>
                            <dt>美食</dt>
                            <dt>面点 干果</dt>
                        </dd>
                    </dl>
                </a>
               <a href="">
                <dl>
                    <dd>
                        <dt>餐厨</dt>
                        <dt>数码产品</dt>
                    </dd>
                </dl>
               </a>
                <a href="">
                    <dl>
                        <dd>
                            <dt>电器</dt>
                            <dt>床品 四件套 被套</dt>
                        </dd>
                    </dl>
                </a>
                <a href="">
                    <dl>
                        <dd>
                            <dt>居家</dt>
                            <dt>奶粉 玩具 辅食</dt>
                        </dd>
                    </dl>
                </a>
                <a href="">
                    <dl>
                        <dd>
                            <dt>洗护</dt>
                            <dt>洗发 洗护 美妆</dt>
                        </dd>
                    </dl>
                </a>
               <a href="">
                <dl>
                    <dd>
                        <dt>孕婴</dt>
                        <dt>奶粉 玩具</dt>
                    </dd>
                </dl>
               </a>
               <a href="">
                <dl>
                    <dd>
                        <dt>服饰</dt>
                        <dt>女装 男装</dt>
                    </dd>
                </dl>
               </a>
                <a href="">
                    <dl>
                        <dd>
                            <dt>杂货</dt>
                            <dt>户外 图书</dt>
                        </dd>
                    </dl>
                </a>
                <a href="">
                    <dl>
                        <dd>
                            <dt>服饰</dt>
                            <dt>品牌 制造</dt>
                        </dd>
                    </dl>
                </a>
         
            </aside>
        
        </div>
    </section>
    <!-- 购物模块 -->
    <div class="container">
        <div class="xtx-panel-box ">
            <div class="box-hd">
                <h3>新鲜好物
                    <small>新鲜出炉 品质靠谱</small>
                </h3>
                <a href="" class="more">查看更多</a>
            </div>
            <div class="box-bd">
                <ul>
                    <li> <a href="">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h4>睿米无线洗尘器</h4>
                        <p>¥ <span>899</span> </p>
                        <div class="new">新品</div>
                    </a>
                       
                    </li>
                    <li>
                        <a href=""><img src="./uploads/new_goods_2.jpg" alt="">
                            <h4>智能环绕3D空调</h4>
                            <p>¥ <span>1299</span> </p>
                            <div class="new">新品</div></a>  
                    </li>
                    <li>
                        <a href=""> <img src="./uploads/new_goods_3.jpg" alt="">
                            <h4>广东软软糯米煲</h4>
                            <p>¥ <span>129</span> </p>
                            <div class="new">新品</div></a>
                    </li>
                    <li> 
                        <a href=""><img src="./uploads/new_goods_4.jpg" alt="">
                            <h4>欧米伽机械手表</h4>
                            <p>¥ <span>899</span> </p>
                            <div class="new">新品</div></a>   
                    </li>
                   
                </ul>
            </div>
        </div>
        <div class="xtx-panel-box purple">
            <div class="box-hd">
                <h3>人气推荐
                    <small>人气爆款 不容错过</small>
                </h3>
                
            </div>
            <div class="box-bd">
                <ul>
                    <li> <a href="">
                        <img src="./uploads/popular_1.jpg" alt="">
                        <h4>特惠推荐</h4>
                        <info>我猜得到 你的需要</info>
                       
                    </a>
                       
                    </li>
                    <li>
                        <a href=""><img src="./uploads/popular_2.jpg" alt="">
                            <h4>爆款推荐</h4>
                            <info>人气好物推荐</info></a>
                        </a>
                             
                    </li>
                    <li>
                        <a href=""> <img src="./uploads/popular_3.jpg" alt="">
                          
                            <h4>场景使用一站买全</h4>
                            <info>编辑精心整理推荐</info>
                            </a>
                    </li>
                    <li> 
                        <a href=""><img src="./uploads/popular_4.jpg" alt="">
                            <h4>领券中心</h4>
                            <info>发现更多超值优惠券</info></a>   
                    </li>
                   
                </ul>
            </div>
        </div>
        <div class="xtx-panel-box shengxian">
            <div class="box-hd">
                <h3>生鲜</h3>
                <ul>
                    <li><a href="" class="active">水果</a></li>
                    <li><a href="">蔬菜</a></li>
                    <li><a href="">肉禽蛋</a></li>
                    <li><a href="">裤装</a></li>
                    <li><a href="">衬衫</a></li>
                    <li><a href="">T恤</a></li>
                    <li><a href="">内衣</a></li>
                </ul>
                <a href="" class="more">查看更多</a>
            </div>
            <div class="goods">
                <div class="goods-left">
                    <a href=""><img src="./uploads/fresh_goods_cover.jpg" alt=""></a>
                </div>
                <div class="goods-right">
                    <ul>
                        
                        <li><a href=""><div class="img-box"><img src="./uploads/fresh_goods_1.jpg" alt=""></div><h3>美威 智利原味三文鱼排240g/袋 4片装</h3><p><span>¥</span>59</p></a><div class="find"><h6>找相似</h6><a href=""><p>发现更多宝贝</p></a></div></li>
                        <li><a href=""><div class="img-box"><img src="./uploads/fresh_goods_2.jpg" alt=""></div><h3>美威 智利原味三文鱼排240g/袋 4片装</h3><p><span>¥</span>59</p></a><div class="find"><h6>找相似</h6><a href=""><p>发现更多宝贝</p></a></div></li>
                        <li><a href=""><div class="img-box"><img src="./uploads/fresh_goods_3.jpg" alt=""></div><h3>美威 智利原味三文鱼排240g/袋 4片装</h3><p><span>¥</span>59</p></a><div class="find"><h6>找相似</h6><a href=""><p>发现更多宝贝</p></a></div></li>
                        <li><a href=""><div class="img-box"><img src="./uploads/fresh_goods_4.jpg" alt=""></div><h3>美威 智利原味三文鱼排240g/袋 4片装</h3><p><span>¥</span>59</p></a><div class="find"><h6>找相似</h6><a href=""><p>发现更多宝贝</p></a></div></li>
                        <li><a href=""><div class="img-box"><img src="./uploads/fresh_goods_5.jpg" alt=""></div><h3>美威 智利原味三文鱼排240g/袋 4片装</h3><p><span>¥</span>59</p></a><div class="find"><h6>找相似</h6><a href=""><p>发现更多宝贝</p></a></div></li>
                        <li><a href=""><div class="img-box"><img src="./uploads/fresh_goods_6.jpg" alt=""></div><h3>美威 智利原味三文鱼排240g/袋 4片装</h3><p><span>¥</span>59</p></a><div class="find"><h6>找相似</h6><a href=""><p>发现更多宝贝</p></a></div></li>
                        <li><a href=""><div class="img-box"><img src="./uploads/fresh_goods_7.jpg" alt=""></div><h3>美威 智利原味三文鱼排240g/袋 4片装</h3><p><span>¥</span>59</p></a><div class="find"><h6>找相似</h6><a href=""><p>发现更多宝贝</p></a></div></li>
                        <li><a href=""><div class="img-box"><img src="./uploads/fresh_goods_8.jpg" alt=""></div><h3>美威 智利原味三文鱼排240g/袋 4片装</h3><p><span>¥</span>59</p></a><div class="find"><h6>找相似</h6><a href=""><p>发现更多宝贝</p></a></div></li>
                    </ul>
                </div>
            </div>
          
        </div>
    </div>
    <footer>
        <div class="concat">
            <div class="container">
                <div class="service">   
                    <dl>
                    <dt >客户服务</dt>
                    <dd class="kefu">在线客服</dd>
                    <dd class="question">问题反馈</dd>
                </dl>
            </div>
            <div class="concern">
                <dl>
                    <dt >关注我们</dt>
                    <dd class="gzh">公众号</dd>
                    <dd class="wb">微博</dd>
                </dl>
            </div>
            <div class="download">
                <dl>
                    <dt >下载app</dt>
                    <dd class="ewm"><img src="./uploads/qrcode.png" alt=""></dd>
                    <dd class="download-page"><p>扫描二维码<pr>立马下载APP</pr><a href="#">下载页面</a></dd>
                </dl>
            </div>

            <div class="download">
                <dl>
                    <dt >服务热线</dt>
                    <h1>400-0000-000</h1>
                    <p>周一至周日 8:00-18:00</p>
                </dl>
            </div>
             
            
                
            </div>
        </div>
        <div class="bottom">
            <div class="container">
                <div class="bottom-top">
                    <ul class="clearfix">
                        <li class="jiage">价格亲民</li>
                        <li class="wuliu">物流快捷</li>
                        <li class="pingzhi">品质新鲜</li>
                    </ul>
                </div>
                
                 <div class="copyright">
                     <ul class="clearfix">
                         <li><a href="">关于我们</a></li>
                         <li><a href="">帮助中心</a></li>
                         <li><a href="">售后服务</a></li>
                         <li><a href="">配送与验收</a></li>
                         <li><a href="">商务合作</a></li>
                         <li><a href="">搜索推荐</a></li>
                         <li><a href="">友情连接</a></li>
                      
                     </ul>
                     <p>CopyRight @ 兔鲜生</p>
                 </div>
               
               
            </div>

        </div>
    </footer>
</body>
</html>